<template>
	<view>
		<view class="bg-gray">
			<view class="bg-green">
				<tar title='申请详情'></tar>
				<view class="width content">
					<view class="flex-row-start greencolor bold">
						<u-icon 
							name="checkmark-circle-fill" 
							color="#499C43" 
							class="iconchhli"
							size="48">
						</u-icon>
						已处理
					</view>
					<view class="bg-white commonbg">
						<view class="flex-row-start font16">
							<view class="baoxiu font12">报 修</view>
							保洁事项描述
						</view>
						<view class="iteminfo flex-row-start color9">
							提单时间
							<view class="color3 rightfont">2024-08-08 12:30</view>
						</view>
						<view class="iteminfo flex-row-start color9">
							房屋
							<view class="color3 rightfont">岭尚小区</view>
						</view>
						<view class="iteminfo flex-row-start color9">
							工单号
							<view class="color3 rightfont">263463464745</view>
						</view>
						<view class="iteminfo flex-row-start color9">
							期望上门时间
							<view class="color3 rightfont">2024-08-08 12:30</view>
						</view>
						<view class="iteminfo flex-row-start color9">
							工单号
							<view class="color3 rightfont">263463464745</view>
						</view>
						<view class="iteminfo  color9">
							问题描述
							<view class="color3 fontbottom">
								水电不通
							</view>
							<view class="flex-row-between">
								<image src="https://www.haopengsong.xyz/static/weixiu.png" v-for="item in 4" :key='item' class="weixiu"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import storage from "@/utils/storage.js"; //缓存
import tar from "@/components/huashuiwan/tar.vue";
export default {
	components:{
		tar
	},
	data() {
		return {
			showBack:true,
		};
	},
	/**
	 * 页面加载
	 */
	onLoad(options) {
		
	},
	/**
	 * 页面显示
	 */
	onShow() {
		
	},
	/**
	 * 触底事件
	 */
	onReachBottom() {
		
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		
	},
	/**
	 * 页面滚动
	 * @param {Object} e
	 */
	onPageScroll(e) {
		
	},
	mounted() {
		
	},
	methods: {
		leftClick(){},
		jump(res){
			uni.navigateTo({
				url: res
			});
		}
	}
};
</script>

<style scoped lang="scss">
	.baoxiuimg{
		flex: 0 0 30%; 
		height: 100px;
		margin-top: 10px;
	}
	.iconchhli{
		margin-right: 8px;
	}
	.commonbg{
		padding: 12px 20px;
		border-radius: 12px;
		margin-top: 14px;
		.line{
			width: 4px;
			height: 16px;
			background-color: #499C43;
			margin-right: 5px;
		}
		.rightfont{
			padding-left: 10px;
		}
		.iteminfo{
			margin-top: 15px;
		}
		.fontbottom{
			line-height: 24px;
			margin-top: 8px;
		}
	}
	.bg-green{
		background: linear-gradient( 180deg, rgba(174,239,139,0.56) 0%, rgba(174,239,139,0) 100%);
	}
	.content{
		margin-top: 10px;
	}
	.baoxiu{
		background-color: #F4F6F8;
		display: inline-block;
		padding: 2px 7px;
		border-radius: 10px;
		color: #999999;
		margin-right: 10px;
	}
	.bg-gray{
		padding-bottom: 50px;
	}
	.weixiu{
		width: 100px;
		height: 100px;
	}
</style>